<template>
	<view class="rule-wrap">
		<view class="content-box">
			<!-- 设备类型 -->
			<view class="iot-type-box">
				<text class="title">设备类型</text>
				<picker @change="bindIotTypePickerChange" :value="iotTypeIndex" :range="classifiedName" class="picker-iot-type">
					<text class="iot-type-name">{{data.iotType}}</text>
					<image src="../../../static/ar-right.png" class="icon-right"></image>
				</picker>
			</view>

			<!-- 内容 -->
			<scroll-view class="type-add-con" scroll-y="true">
				<view class="property-list">
					<view class="property-item" v-for="(item, index) in data.rules" :key="index">
						<view class="item-row">
							<view class="title">报警字段</view>
							<picker @change="bindPropertyPickerChange($event,index)" :value="item.keyIndex" :range="property" range-key="name"
							 class="item-row-value item-row-picker">
								<text class="item-row-picker-name">{{property[item.keyIndex].name}}</text>
								<image src="../../../static/ar-right.png" class="icon-right"></image>
							</picker>
						</view>

						<view class="item-row">
							<view class="title">条件</view>
							<picker @change="bindOperatorPickerChange($event,index)" :value="item.operatorIndex" :range="alarmOpera"
							 range-key="value" class="item-row-value item-row-picker">
								<text class="item-row-picker-name">{{alarmOpera[item.operatorIndex].value}}</text>
								<image src="../../../static/ar-right.png" class="icon-right"></image>
							</picker>
						</view>

						<view class="item-row">
							<view class="title">值</view>
							<input class="item-row-value input-value" placeholder="请输入" v-model="item.value" />
						</view>
					</view>
				</view>

				<image src="../../../static/police/rule-add.png" class="icon-add" @click="onAdd"></image>
			</scroll-view>
		</view>

		<view class="btns">
			<view class="btn-add" @click.stop="onSave">保存</view>
		</view>
	</view>
</template>

<script>
	import basePath from "@/common/basePath.js"
	import {
		GetObjProperty,
		IsArray
	} from "@/common/common.js"

	export default {
		data() {
			return {
				ruleId: "",
				classifiedName: [],
				iotTypeIndex: 0,
				alarmOpera: [],
				property: [],
				data: {
					iotType: "",
					rules: [],
				},
			}
		},
		onLoad(options) {
			this.ruleId = options.ruleId

			this.getInfo(this.ruleId)
		},
		methods: {
			getInfo(ruleId) {
				uni.request({
					url: `${basePath}/IotAlarmRule/details/${ruleId}`,
					method: "GET",
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = GetObjProperty(resData, "data")
							let rules = IsArray(GetObjProperty(data, "rules"))
							
							rules.forEach(item => {
									item.keyIndex = 0
									item.operatorIndex = 0
							})

							this.$set(this.data, "iotType", GetObjProperty(data, "iotType"))
							this.$set(this.data, "rules", rules)

							// 获取设备分类
							this.getClassifiedName()

							// 获取操作符
							this.getAlarmOpera()

							this.getProperty(true)
						}
					}
				})
			},
			getProperty(setIndex) {
				uni.request({
					url: `${basePath}/IotAlarmRule/getProperty/${this.data.iotType}`,
					method: "GET",
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							this.property = IsArray(GetObjProperty(resData, "data"))
							
							if (!setIndex) return
							
							let rules = this.data.rules
							rules.forEach(item => {
								this.property.forEach((record, index) => {
									if (item.key === record.key) item.keyIndex = index
								})
							})

							this.$set(this.data, "rules", rules)
						}
					}
				})
			},
			getAlarmOpera() {
				uni.request({
					url: `${basePath}/IotAlarmRule/alarmOpera`,
					method: "GET",
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							this.alarmOpera = IsArray(GetObjProperty(resData, "data"))
							
							let rules = this.data.rules
							rules.forEach(item => {
								this.alarmOpera.forEach((record, index) => {
									if (item.key === record.key) item.operatorIndex = index
								})
							})
							
							this.$set(this.data, "rules", rules)
						}
					}
				})
			},
			getClassifiedName() {
				uni.request({
					url: `${basePath}/IotAlarmRule/getClassifiedName`,
					method: "GET",
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = IsArray(GetObjProperty(resData, "data"))

							if (data.length) {
								let iotType = this.data.iotType

								data.forEach((item, index) => {
									if (item === iotType) {
										this.iotTypeIndex = index
									}
								})
							}

							this.classifiedName = data
						}
					}
				})
			},
			bindIotTypePickerChange(e) {
				this.iotTypeIndex = e.target.value

				this.$set(this.data, "iotType", this.classifiedName[this.iotTypeIndex])
				this.$set(this.data, "rules", [])
				this.$nextTick(() => {
					this.getProperty()
				})
			},
			bindPropertyPickerChange(e, index) {
				let rules = this.data.rules

				rules[index].key = this.property[index].key
				rules[index].keyIndex = e.target.value

				this.$set(this.data, "rules", rules)
			},
			bindOperatorPickerChange(e, index) {
				let rules = this.data.rules

				rules[index].key = this.alarmOpera[index].key
				rules[index].operatorIndex = e.target.value

				this.$set(this.data, "rules", rules)
			},
			onAdd() {
				let rules = this.data.rules

				rules.push({
					key: this.property[0].key,
					keyIndex: 0,
					operator: this.alarmOpera[0].key,
					operatorIndex: 0,
					value: ""
				})

				this.$set(this.data, "rules", rules)
			},
			onSave() {
				if (!this.data.rules.length) {
					uni.showToast({
						title: "请添加报警规则",
						icon: "none",
					})

					return
				}

				let rules = this.data.rules
				rules.map(item => {
					delete item.keyIndex
					delete item.operatorIndex
				})

				uni.showLoading({
					title: "提交中...",
				})
				uni.request({
					url: `${basePath}/IotAlarmRule/update`,
					method: "POST",
					data: {
						id: this.ruleId,
						...this.data,
						rules
					},
					complete: () => {
						uni.hideLoading()
					},
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						uni.showToast({
							title: GetObjProperty(resData, "uiMsg"),
							icon: "none"
						})

						if (resData.code === 200 && resData.success) {
							uni.setStorageSync("renderRuleList", "true")

							uni.navigateBack()
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.rule-wrap {
		width: 100%;
		height: 100vh;
		padding: 0 30rpx;
		box-sizing: border-box;

		.content-box {
			height: calc(100% - 156rpx);
			overflow: hidden;

			.iot-type-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 112rpx;
				margin: 36rpx 0;
				padding: 0 30rpx;
				background-color: #F5F7F9;
				border-radius: 16rpx;
				box-sizing: border-box;

				.title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.picker-iot-type {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					height: 100%;
					margin-left: 20rpx;
					text-align: right;

					.iot-type-name {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
			}

			.type-add-con {
				height: calc(100% - 184rpx);

				.property-list {
					.property-item {
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;
						height: 272rpx;
						padding: 30rpx;
						background-color: #F5F7F9;
						border-radius: 16rpx;
						box-sizing: border-box;

						&:not(:last-child) {
							margin-bottom: 48rpx;
						}

						.item-row {
							display: flex;
							justify-content: space-between;
							width: 100%;

							.title {
								width: 120rpx;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
							}

							.item-row-value {
								flex: 1;
								margin-left: 20rpx;

								&.item-row-picker {
									display: flex;
									justify-content: flex-end;
									align-items: center;

									.item-row-picker-name {
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #999999;
									}
								}

								&.input-value {
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #666666;
									text-align: right;
								}
							}
						}
					}
				}

				.icon-add {
					width: 104rpx;
					height: 92rpx;
					margin-top: 36rpx;
				}
			}
		}

		.btns {
			display: flex;
			align-items: center;
			width: 100%;
			height: 156rpx;

			.btn-add {
				width: 100%;
				height: 96rpx;
				background: #2573B0;
				border-radius: 60rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
			}
		}

		.icon-right {
			width: 18rpx;
			height: 34rpx;
			margin-left: 24rpx;
		}
	}
</style>
